<template>
  <div
    class="showPanel flex flex-col gap-y-[20px] transitionPanel h-full animate__fadeInRight relative animate__animated"
  >
    <div class="relative h-full text-[#fff]">
      <div class="absolute left-[-280px] top-[50px]">
        <base-card class="overflow-hidden" title="天气实时监测">
          <div
            class="grid grid-cols-3 px-[10px] h-full"
            style="align-content: stretch"
          >
            <div
              v-for="(item, index) in onlineMonitor"
              :key="index"
              class="flex flex-col justify-center"
            >
              <div class="text-[16px] text_blue_point">{{ item.label }}</div>
              <div class="text-[15px] font-bold flex items-center gap-[5px]">
                {{ item.value }}
                <div class="text-[12px] text-[#999]">
                  {{ item.unit }}
                </div>
              </div>
            </div>
          </div>
        </base-card>
      </div>
      <div
        class="absolute flex flex-col gap-y-[20px] top-0 left-0 right-0 bottom-0 py-[50px] pr-[10px]"
      >
        <!--          园区能耗分析-->
        <base-card
          class="flex-1 overflow-hidden"
          title="小海子园区空气质量实时监测"
        >
          <div
            class="grid grid-cols-3 px-[10px] h-full"
            style="align-content: stretch"
          >
            <div
              v-for="(item, index) in xiaoHaiZiGasMonitor"
              :key="index"
              class="flex flex-col justify-center"
            >
              <div class="text-[16px] text_blue_point">{{ item.label }}</div>
              <div class="text-[15px] font-bold flex items-center gap-[5px]">
                {{ item.value }}
                <div class="text-[12px] text-[#999]">
                  {{ item.unit }}
                </div>
              </div>
            </div>
          </div>
        </base-card>
        <base-card
          class="flex-1 overflow-hidden"
          title="七台镇园区空气质量实时监测"
        >
          <div
            class="grid grid-cols-3 px-[10px] h-full"
            style="align-content: stretch"
          >
            <div
              v-for="(item, index) in qiTaiZenGasMonitor"
              :key="index"
              class="flex flex-col justify-center"
            >
              <div class="text-[16px] text_blue_point">{{ item.label }}</div>
              <div class="text-[15px] font-bold flex items-center gap-[5px]">
                {{ item.value }}
                <div class="text-[12px] text-[#999]">
                  {{ item.unit }}
                </div>
              </div>
            </div>
          </div>
        </base-card>
        <base-card
          class="flex-1 overflow-hidden"
          title="三大顷园区空气质量实时监测"
        >
          <div
            class="grid grid-cols-3 px-[10px] h-full"
            style="align-content: stretch"
          >
            <div
              v-for="(item, index) in sanDaQingGasMonitor"
              :key="index"
              class="flex flex-col justify-center"
            >
              <div class="text-[16px] text_blue_point">{{ item.label }}</div>
              <div class="text-[15px] font-bold flex items-center gap-[5px]">
                {{ item.value }}
                <div class="text-[12px] text-[#999]">
                  {{ item.unit }}
                </div>
              </div>
            </div>
          </div>
        </base-card>
      </div>
    </div>
  </div>
</template>
<script setup>
import BaseCard from "@/components/three/component/baseCard.vue";
import { ref, onMounted } from "vue";
import { getHJJCRightData } from "@/api/dataScreen/dataScreen.js";

const xiaoHaiZiGasMonitor = ref([
  {
    label: "PM10",
    value: 1.2,
    unit: "mg/m³",
  },
  {
    label: "PM2.5",
    value: 1.3,
    unit: "mg/m³",
  },
  {
    label: "二氧化碳",
    value: 3.2,
    unit: "ppm",
  },
  {
    label: "臭氧",
    value: 0.1,
    unit: "ppm",
  },
  {
    label: "二氧化硫",
    value: 1,
    unit: "ppm",
  },
  {
    label: "一氧化碳",
    value: 2.5,
    unit: "ppm",
  },
  {
    label: "TVOC",
    value: 1.4,
    unit: "ppm",
  },
]);
const onlineMonitor = ref([
  {
    label: "风速",
    value: 1.2,
    unit: "M/S",
  },
  {
    label: "风向",
    value: 1.3,
    unit: "",
  },
  {
    label: "大气压力",
    value: 3.2,
    unit: "kPa",
  },
  {
    label: "温度",
    value: 3.2,
    unit: "℃",
  },
  {
    label: "湿度",
    value: 3.2,
    unit: "%RH",
  },
]);
const qiTaiZenGasMonitor = ref([]);
const sanDaQingGasMonitor = ref([]);
onMounted(() => {
  getTOP1();
  getAreaData();
});
const filterList = [
  "臭氧",
  "TVOC",
  "二氧化氮",
  "PM2.5",
  "PM10",
  "一氧化碳",
  "二氧化硫",
];
const getTOP1 = () => {
  getHJJCRightData({ serialNumber: "1030544AA693" }).then((res) => {
    onlineMonitor.value = res.data?.list
      ?.filter((item) => !filterList.includes(item.deviceType))
      .map((item) => {
        return {
          label: item.deviceType,
          value: item.value,
          unit: item.deviceTypeUnit,
        };
      });
  });
};
const getAreaData = () => {
  let areas = [
    { label: "小海子", value: "1030544ACD99" },
    { label: "七台镇", value: "1430544AE419" },
    { label: "三大顷", value: "1030544AA693" },
  ];
  getHJJCRightData({ serialNumber: "1030544ACD99" }).then((res) => {
    xiaoHaiZiGasMonitor.value = res.data?.list
      ?.filter((item) => filterList.includes(item.deviceType))
      .map((item) => {
        return {
          label: item.deviceType,
          value: item.value,
          unit: item.deviceTypeUnit,
        };
      });
  });
  getHJJCRightData({ serialNumber: "1430544AE419" }).then((res) => {
    qiTaiZenGasMonitor.value = res.data?.list
      ?.filter((item) => filterList.includes(item.deviceType))
      .map((item) => {
        return {
          label: item.deviceType,
          value: item.value,
          unit: item.deviceTypeUnit,
        };
      });
  });
  getHJJCRightData({ serialNumber: "1030544AA693" }).then((res) => {
    sanDaQingGasMonitor.value = res.data?.list
      ?.filter((item) => filterList.includes(item.deviceType))
      .map((item) => {
        return {
          label: item.deviceType,
          value: item.value,
          unit: item.deviceTypeUnit,
        };
      });
  });
};
</script>
<style scoped lang="less">
.transitionPanel {
  transition:
    right 0.7s ease-in-out,
    width 1s ease-in-out,
    opacity 0.7s ease-in-out;
}

.showPanel {
  opacity: 1;
  right: 0;
  //width: 100%;
}

.hidePanel {
  opacity: 0;
  //width: 0%;
  right: -120%;
}

.opt {
  transition:
    right 0.7s ease-in-out,
    left 0.7s ease-in-out;
}

.optToLeft {
  right: 0px;
}

.optToRight {
  right: 360px;
}

:deep(.ant-progress-text) {
  color: #fff;
  font-size: 12px;
}
</style>
